<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="900px"

  >
    <table style="width: 100%" class="mytable">
      <tr>
        <td class="ttitle" rowspan="2">老人信息</td>

        <td class="ttitle">老人姓名</td>
        <td>{{detail.elderlyName}}</td>
        <td class="ttitle">性别</td>
        <td>{{detail.elderlyGenderName}}</td>

      </tr>
      <tr>

        <td class="ttitle">证件号</td>   <td>{{detail.elderlyCardNo}}</td>
        <td class="ttitle">出生日期</td>
        <td>{{detail.elderlyBirth}}</td>

      </tr>
      <tr>
        <td class="ttitle" rowspan="2">预定人信息</td>
        <td class="ttitle">预定人名字</td>   <td>{{detail.bookerName}}</td>
        <td class="ttitle">预定人手机号</td>
        <td>{{detail.contactNumber}}</td>

      </tr>
      <tr>

        <td class="ttitle">与老人关系</td><td colspan="3">{{detail.relationshipName}}</td>


      </tr>
      <tr>
        <td class="ttitle" rowspan="2">预定信息</td>
        <td class="ttitle">预定编号</td>   <td>{{detail.identify}}</td>
        <td class="ttitle">预定时间</td>   <td>{{ detail.destineTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</td>

      </tr>
      <tr>
        <td class="ttitle"> 预定房间</td>   <td>{{detail.buildingNumber}}#{{detail.unit}}#{{detail.floor}}F{{detail.roomNumber}}-{{detail.bedNumber}}(楼/单元/楼层/房间/床位)</td>
        <td class="ttitle"> 预定状态</td>   <td>{{detail.statusName}}</td>
      </tr>
      <td class="ttitle" rowspan="1" >备注信息</td>
      <td  colspan="4">{{detail.remark}}</td>
    </table>



    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关 闭</el-button>

    </div>

  </el-dialog>
</template>

<script>
    import { parseTime} from "@/utils/index";
    export default {
        filters:{
            parseTime:parseTime
        },
        name: "reserveinfo",
      data() {
        return {
          title:"详情信息",
            detail:{},
          dialogFormVisible: false,
        };
      },
      methods:{
        showEdit(row) {


          this.detail=row
          console.log(this.detail)
          this.dialogFormVisible = true;
        },
      },

    }
</script>

<style scoped>
  table
  {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  table td, table th
  {
    border: 1px solid #cad9ea;
    height: 30px;
  }
  table .ttitle
  {
    background-color: #F5FAFA;
    width: 100px;
  }
  table tr:nth-child(odd)
  {
    background: #fff;
  }
</style>
